﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="paginatioin.aspx.cs" Inherits="test_pagination_paginatioin" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题页</title>

<link rel="stylesheet" href="./css/jpage.css" />

<script type="text/javascript" src="../../../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.paginator.js"></script>



<script type="text/javascript" >

$(document).ready(function() {
			var options = {
				itemsPerPage: 3,
				callback:pageselectCallback
			};
			 
			$("#pagination").pagination(0,options);
});

//翻页事件
function pageselectCallback(page_id, jq) {

    var tbody = ""; //声明表格中body部分
    $.ajax({ //这里使用到Jquery的ajax方法，具体使用在这里不详细叙述
        type : "POST",
        dataType : "text",
        url : "paginatioin.ashx", //请求的处理数据
        data: "pageIndex=" + page_id,
        //下面的操作就是成功返回数据以后，进行数据的绑定
        success: function(data) {

            $("#linkTable tr:gt(0)").remove();
            
            tbody = data;
            
            $("#linkTable").append(tbody);
        }
    });
}

</script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        <table id="linkTable">
        <thead>
        <tr class="tableHeader" align="center">
        <th style="width:200px; text-align:center;" >
        产品名称
        </th>
        <th style="width:200px; text-align:center">
        产品单价
        </th>
        </tr>
        </thead>
        </table>
        </div>
        <div id="pagination" class="pagination"></div>

    </form>
</body>
</html>
